import React, { Component } from 'react'
import { Card, Table, Button, Input, Space } from 'antd'
import { getUserList } from '@/requests/api/user.js'

const columns = [
  {
    title: '姓名',
    dataIndex: 'userName',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time'
  },
  {
    title: '操作',
    dataIndex: 'action',
    render: record => (
      <Space>
        <Button>编辑</Button>
        <Button danger>删除</Button>
      </Space>
    )
  }
];


class UserSetting extends Component {
  constructor(){
    super()
    this.state = {
      dataSource: []
    }
  }

  async componentDidMount() {
    const {data} = await getUserList()
    this.setState({
      dataSource: data
    })
  }
  render() {
    return (
      <Card
        title='用户管理'
        bordered={false}
        extra={
          <Space>
            <Input.Search
              enterButton
              placeholder="input search text"
              onSearch={value => console.log(value)}
              style={{ width: 200 }}
            />
            <Button
            >添加</Button>
          </Space>
        }
      >
        <Table rowKey={record => record.id} dataSource={this.state.dataSource} columns={columns} />
      </Card>
    )
  }
}

export default UserSetting
